<template>
    <div class="orders">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="9">
                    <el-input placeholder="请输入内容" v-model="queryOrdersInfo.query" @clear="getOrdersData" clearable>
                        <el-button slot="append" icon="el-icon-search"@click="getOrdersData" ></el-button>
                    </el-input>
                </el-col>
            </el-row>
<!--            table表格-->
            <el-table
                    :data="ordersDate"
                    style="width: 100%">
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="订单编号" prop="order_number" width="300px" align="center"></el-table-column>
                <el-table-column label="订单价格" prop="order_price" align="center"></el-table-column>
                <el-table-column label="是否付款" align="center">
                    <template v-slot="slot">
                        <el-tag v-if="slot.row.pay_status==='1'" type="primary">已付款</el-tag>
                        <el-tag v-else type="danger">未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否发货" prop="is_send" align="center"></el-table-column>
                <el-table-column label="下单时间" align="center">
                    <template v-slot="slot">
                        {{slot.row.create_time|dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="slot">
                        <el-button type="primary" class="el-icon-edit" size="mini" @click="showBox"></el-button>
                        <el-button type="success" class="el-icon-setting" size="mini" @click="showPeogressBox"></el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--            分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryOrdersInfo.pagenum"
                    :page-sizes="[5, 7, 10]"
                    :page-size="queryOrdersInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals">
            </el-pagination>
        </el-card>
<!--        修改对话框-->
        <el-dialog
                title="修改地址"
                :visible.sync="ordersDialogEdit"
                width="50%"
                @close="closeDialog"
              >
            <el-form :model="odersForm" :rules="odersFormRules" ref="odersFormRef" label-width="100px" >
                <el-form-item label="省市区/县" prop="address1">
                    <el-cascader :options="citydata" v-model="odersForm.address1"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address2">
                    <el-input v-model="odersForm.address2"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="ordersDialogEdit = false">取 消</el-button>
    <el-button type="primary" @click="ordersDialogEdit = false">确 定</el-button>
  </span>
        </el-dialog>
        <el-dialog
                title="物流进度"
                :visible.sync="ordersDialogProgress"
                width="50%"
                @close="closeDialog"
              >
            <el-timeline >
            <el-timeline-item
                    v-for="(activity, index) in progressInfo"
                    :key="index"
                    :timestamp="activity.time">
                {{activity.context}}
            </el-timeline-item>
            </el-timeline>

            <span slot="footer" class="dialog-footer">

  </span>
        </el-dialog>
    </div>
</template>

<script>
    import citydata from "./citydata.js";

    export default {
        name: "orders",
        created() {
            this.getOrdersData();
        },
        data(){
            return{
                queryOrdersInfo:{
                    query:'',
                    pagenum:1,
                    pagesize:10
                },
                ordersDate:[],
                totals:0,
                ordersDialogEdit:false,
                odersForm:{
                    address1:[],
                    address2:'',
                },
                odersFormRules:{
                    address1:[{ required: true, message: '请输入', trigger: 'blur' }],
                    address2:[{ required: true, message: '请输入', trigger: 'blur' }],
                },
                citydata:citydata,
                ordersDialogProgress:false,
                progressInfo:[]
            }
        },
        methods:{
           async getOrdersData(){
                const {data:res}=await this.$http.get('orders',{params:this.queryOrdersInfo});
                if(res.meta.status!==200){
                    return this.$message.error("请求数据失败");
                }
                // console.log(res);
                this.ordersDate=res.data.goods;
                this.totals=res.data.total;

            },
            handleSizeChange(newsize){
               this.queryOrdersInfo.pagesize=newsize;
               this.getOrdersData();
            },
            handleCurrentChange(newnum){
               this.queryOrdersInfo.pagenum=newnum;
               this.getOrdersData();
            },
            showBox(){
               this.ordersDialogEdit=true;
            },
            closeDialog(){
              this.$refs.odersFormRef.resetFields();
            },
            async showPeogressBox(){
               const{data:res}=await this.$http.get('/kuaidi/1106975712662');
               if(res.meta.status!==200){
                   return this.$message.error("获取数据失败")
               }
               this.progressInfo=res.data;
               console.log(res);
                this.ordersDialogProgress=true;
            }

        }

    }
</script>

<style lang="less" scoped>
    .orders{
        padding: 15px;
    }
    .el-card{
        margin-top: 15px;
    }
    .el-cascader{
        width: 100%;
    }
</style>
